/****************
 * @description :血溅会议室 
 * @author   : jinglei  <jinglei@staff.sina.com.cn>
 * @date     : 2018-1-2
 ****************/

/* 横屏提示 */

.oriention {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	background: #32363c;
}

.oriention_con {
	width: 8.73rem;
	height: 3.88rem;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
	font-size: 0;
}

.oriention_logo {
	display: inline-block;
	width: 4.27rem;
	height: 2.89rem;
	background: url(http://dev.dp.sina.cn/jinglei/aoshuang/summary/index/img/oriention.png) no-repeat 50%;
	background-size: 100% auto;
}

.oriention_tip {
	color: #fff;
	font-size: .46rem;
	text-align: center;
	margin-top: .59rem;
}


/* 开始页面 */
.sinaLogo {
	position: absolute;
    top: 0.4rem;
    left: 0.6rem;
    width: 1.52rem;
    height: 0.73rem;
    background: url(../images/sinaLogo.png);
    background-size: 100% 100%;
}

.fight_card {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}


/*标题*/

.fight_pic_title {
	margin: 0 auto 0.3rem;
	width: 4.49rem;
	height: 3.01rem;
	background: url(../images/title.png);
	background-size: 100% 100%;
}

.fight_pic_card {
	width: 6.52rem;
	height: 4.30rem;
	margin: 0 auto;
	background: url(../images/m_fight.png);
	background-size: 100% 100%;
}

.fight_pic_card strong {
	display: block;
	text-align: center;
	margin: 0 auto;
	width: 3.82rem;
	height: 0.94rem;
	background: url(../images/title.png);
	background-size: 100% 100%;
}

.fight_op_wrap {
	clear: both;
	margin: 0 auto;
	text-align: center;
	padding-top: .3rem
}

.fight_op_wrap aside {
	margin-bottom: .34rem;
	clear: both
}

.fight_op_wrap aside.home_result_more {
	margin-top: .4rem;
	margin-bottom: 0;
	font-size: .32rem;
	color: #2e5898;
}

.home_result_more a {
	color: #fcf915;
}

.fight_op_wrap aside img {
	width: 5.94rem;
	height: 1.14rem
}

.vs_card {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	-webkit-transform: translate(-50%, -60%);
	transform: translate(-50%, -60%)
}

.vs_card aside {
	display: block;
	text-align: center
}

.vs_info_pic {
	border-radius: 50%;
	border: .08rem solid #fff;
	width: 2.1rem;
	height: 2.1rem
}

.vs_info_pic_t {
	display: block;
	font-size: .36rem;
	line-height: 1.8;
	text-align: center;
	color: white;
	white-space: nowrap;
}

.vs_card_t {
	padding: .3rem 0;
	font-size: .54rem;
	text-align: center;
	color: #fff;
	font-weight: bold;
	white-space: nowrap;
	text-indent: 0.5em;
}

.vs_close {
	position: absolute;
	z-index: 10;
	bottom: .8rem;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto
}

.vs_close img {
	width: 1.1rem
}


/* 游戏主页 */


/*倒计时动画*/

@-webkit-keyframes countDownAni {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes countDownAni {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.countDown {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 0rem;
	color: yellow;
	background: rgba(0, 0, 0, .8);
	position: absolute;
	z-index: 60;
	width: 100%;
	height: 100%;
	-webkit-text-stroke: 6px white;
}
.remindBox {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.remindBox .remind {
	margin: 1.34rem auto 0;
	width: 5.18rem;
	height: 2.36rem;
}

.remindBox .switchOn {
	background: url(../images/switchOn.png);
	background-size: 100% 100%;
}

.remindBox .switchOff {
	background: url(../images/switchOff.png);
	background-size: 100% 100%;
}

.countDown .remindCount {
	margin: 0 auto;
	width: 1.33rem;
	height: 2rem;
}

.countDown .time3,
.countDown .time2,
.countDown .time1 {
	position: absolute;
	top: 0;
	width: 1.33rem;
	height: 2rem;
	opacity: 0;
}

.countDown .time3 {
	background: url(../images/time3.png);
	background-size: 100% 100%;
	-webkit-animation: countDownAni 1s ease-in-out;
	animation: countDownAni 1s ease-in-out;
}

.countDown .time2 {
	background: url(../images/time2.png);
	background-size: 100% 100%;
	-webkit-animation: countDownAni 1s ease-in-out 1s;
	animation: countDownAni 1s ease-in-out 1s;
}

.countDown .time1 {
	background: url(../images/time1.png);
	background-size: 100% 100%;
	-webkit-animation: countDownAni 1s ease-in-out 2s;
	animation: countDownAni 1s ease-in-out 2s;
}

.start_bg {
	background: url(../images/f_bar.jpg) repeat;
	background-size: 2.5rem auto
}

.main_wrap {
	position: absolute;
	z-index: 1;
	max-width: 10.24rem;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url(../images/bg.jpg) no-repeat center top;
	background-size: cover
}

.door_wrap {
	position: absolute;
	z-index: 2;
	top: 1.3rem;
	right: 0;
	width: 1.32rem;
	height: 4.33rem;
	background: url(../images/door.png) no-repeat;
	background-size: cover
}

.door_ms aside {
	position: absolute;
	z-index: 30;
	right: 0;
	top: 1.6rem;
	display: inline-block;
	width: 2rem;
	height: 3.2rem;
}

.ms_zt1 {
	background: url(../images/ms.png) no-repeat;
	background-position: 0 0;
	background-size: 2rem 9.6rem
}

.ms_zt2 {
	background: url(../images/ms.png) no-repeat;
	background-position: 0 -3.2rem;
	background-size: 2rem 9.6rem
}

.ms_zt3 {
	background: url(../images/ms.png) no-repeat;
	background-position: 0 -6.4rem;
	background-size: 2rem 9.6rem
}

.clock_wrap {
	position: absolute;
	z-index: 2;
	top: .14rem;
	left: .2rem;
	width: 1.14rem;
	height: 1.42rem;
	padding-top: .4rem;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: url(../images/clock_bg.png) no-repeat;
	background-size: cover
}

.clock_num {
	color: #dfb719;
	text-align: center;
	font-size: .48rem;
	line-height: 1.7;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	display: block
}

.kpi_wrap {
	position: absolute;
	z-index: 2;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: .94rem;
	width: 4.18rem;
	height: 2.23rem;
	background: url(../images/kpi.png) no-repeat;
	background-size: cover
}

.music_wrap {
	position: absolute;
	z-index: 3;
	top: .22rem;
	right: .22rem;
	width: .64rem;
	height: .64rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
}

.music_icon {
	display: block;
	width: .64rem;
	height: .64rem;
	background: url(../images/music_ico.png) no-repeat;
	background-size: .64rem auto
}

.music_icon_pause {
	display: block;
	width: .64rem;
	height: .64rem;
	background: url(../images/music_ico_pause.png) no-repeat;
	background-size: .64rem auto
}

.vs_bar {
	position: absolute;
	z-index: 3;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	width: 4.2rem;
	height: .44rem;
	line-height: .44rem;
	top: .26rem;
	background: #ff3434;
	font-size: .2rem;
	color: #fff
}

.vs_bar_l {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 12;
	width: 2rem;
	height: .44rem;
	text-align: right;
	padding: 0 .32rem 0 .2rem;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.vs_bar_l strong {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden
}

.vs_bar_l_t {
	position: absolute;
	right: -.08rem;
	z-index: 20;
	top: -.06rem;
	font-size: .3rem;
	color: #3699ff
}

.vs_bar_r_t {
	position: absolute;
	left: .28rem;
	z-index: 20;
	bottom: -.06rem;
	font-size: .3rem;
	color: #ff3434
}

.vs_bar_r {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	background: #3699ff;
	width: 2.2rem;
	height: .44rem;
	text-align: left;
	padding: 0 .2rem 0 .6rem;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.vs_bar_r strong {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden
}

.vs_bar_l_icon {
	position: absolute;
	left: -.28rem;
	top: -.08rem;
	z-index: 20;
	border: .04rem solid #ff3434;
	width: .52rem;
	height: .52rem;
	border-radius: 50%;
	background: #ff3434
}

.vs_bar_r_icon {
	position: absolute;
	right: -.28rem;
	top: -.08rem;
	z-index: 20;
	border: .04rem solid #3699ff;
	width: .52rem;
	height: .52rem;
	border-radius: 50%;
	background: #3699ff
}

.vs_bar_l_icon img,
.vs_bar_r_icon img {
	width: .52rem;
	height: .52rem;
	border-radius: 50%;
	display: block;
}

.vs_bar_l i {
	position: absolute;
	right: -.2rem;
	top: 0;
	bottom: 0;
	width: .4rem;
	-webkit-transform: skew(-45deg);
	background: #ff3434
}

.ys_wrap {
	position: absolute;
	z-index: 20;
	top: 2.17rem;
	height: 6.57rem;
	left: 0;
	right: 0;
	background: url(../images/ys.png) no-repeat center top;
	background-size: cover
}

.boss_wrap {
	position: absolute;
	z-index: 15;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	top: 1.66rem;
	height: 2.8rem;
	width: 7.5rem;
}

.goOut_wrap {
	position: absolute;
	z-index: 21;
	/* left: 50%; */
	/* transform: translate(-50%, 0); */
	top: 1.66rem;
}

.goOut_wrap .goOut {
	width: 3rem;
	height: 2rem;
	background: url(../images/goOut.png);
	/* z-index: 21; */
	background-size: 100% 100%;
}

.boss_wrap aside {
	height: 2.8rem;
	width: 7.5rem;
	display: inline-block;
}

.boss_zt_1 {
	background: url(../images/boss.png) no-repeat;
	background-position: 0 0;
	background-size: 7.5rem 11.2rem
}

.boss_zt_2 {
	background: url(../images/boss.png) no-repeat;
	background-position: 0 -2.8rem;
	background-size: 7.5rem 11.2rem
}

.boss_zt_3 {
	background: url(../images/boss.png) no-repeat;
	background-position: 0 -5.6rem;
	background-size: 7.5rem 11.2rem
}

.boss_zt_4 {
	background: url(../images/boss.png) no-repeat;
	background-position: 0 -8.4rem;
	background-size: 7.5rem 11.2rem
}

.c_vs_chair_l {
	left: .26rem;
	bottom: 2.24rem;
	position: absolute;
	z-index: 50;
	width: 2.67rem;
	height: 1.91rem;
	background: url(../images/chair.png) no-repeat;
	background-size: cover
}

.c_vs_chair_r {
	right: .26rem;
	bottom: 2.24rem;
	position: absolute;
	z-index: 50;
	width: 2.67rem;
	height: 1.91rem;
	background: url(../images/chair.png) no-repeat;
	background-size: cover
}

.c_vs_score_l {
	left: .26rem;
}

.c_vs_score_r {
	right: .26rem;
}

@-webkit-keyframes guider {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
	50% {
		-webkit-transform: translateY(-0.5rem);
		transform: translateY(-0.5rem)
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes guider {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
	50% {
		-webkit-transform: translateY(-0.5rem);
		transform: translateY(-0.5rem)
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

.c_vs_score_r .guide {
	position: absolute;
	width: 2.67rem;
	height: 2rem;
	top: -2.5rem;
	-webkit-animation: guider 1s ease-in-out infinite;
	animation: guider 1s ease-in-out infinite;
	background: url(../images/guide.png);
	background-size: 100% 100%;
}

.c_vs_score_l,
.c_vs_score_r {
	bottom: 4.15rem;
	position: absolute;
	z-index: 50;
	width: 2.67rem;
	height: 2.91rem;
	/*border: 1px solid red;*/
}


/*加分字体*/

.c_vs_score_l .addScore,
.c_vs_score_r .addScore {
	width: 2rem;
	height: 1.8rem;
	background:url(../images/redCart.png);
	transform: rotateX()(60deg);
	background-size:  100% 100%;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	top: 0;
	color: #20b2ef;
	font-size: 0.6rem;
	font-weight: bold;
	font-family: "arial rounded mt bold", Helvetica, sans-serif;
	overflow: hidden;
}


/*减分字体 */

.c_vs_score_l .reduceScore,
.c_vs_score_r .reduceScore {
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	bottom: 0;
	color: #fd6103;
	font-size: 0.6rem;
	font-weight: bold;
	font-family: "arial rounded mt bold", Helvetica, sans-serif;
	overflow: hidden;
}

.c_vs_chair_l span,
.c_vs_chair_r span {
	display: inline-block;
	font-weight: bold;
	-webkit-text-stroke: 3px #457cb4;
	text-align: center;
	line-height: 1.5rem;
	height: 1.5rem;
	width: 2.67rem;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.06rem;
	color: #fff;
}

.c_vs_p_l {
	left: 0;
	bottom: 2.24rem;
	position: absolute;
	z-index: 30;
}

.c_vs_p_l aside,
.c_vs_p_r aside {
	display: inline-block;
	width: 5rem;
	height: 6.1rem;
}

.c_vs_p_l_1 {
	background: url(../images/p_l.png) no-repeat;
	background-position: 0 0;
	background-size: 5rem 36.6rem
}

.c_vs_p_l_2 {
	background: url(../images/p_l.png) no-repeat;
	background-position: 0 -6.1rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_l_3 {
	background: url(../images/p_l.png) no-repeat;
	background-position: 0 -12.2rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_l_4 {
	background: url(../images/p_l.png) no-repeat;
	background-position: 0 -18.3rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_l_5 {
	background: url(../images/p_l.png) no-repeat;
	background-position: 0 -24.4rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_l_6 {
	background: url(../images/p_l.png) no-repeat;
	background-position: 0 -30.5rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_r {
	right: 0;
	bottom: 2.24rem;
	position: absolute;
	z-index: 30;
}

.c_vs_p_r_1 {
	background: url(../images/p_r.png) no-repeat;
	background-position: 0 0;
	background-size: 5rem 36.6rem
}

.c_vs_p_r_2 {
	background: url(../images/p_r.png) no-repeat;
	background-position: 0 -6.1rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_r_3 {
	background: url(../images/p_r.png) no-repeat;
	background-position: 0 -12.2rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_r_4 {
	background: url(../images/p_r.png) no-repeat;
	background-position: 0 -18.3rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_r_5 {
	background: url(../images/p_r.png) no-repeat;
	background-position: 0 -24.4rem;
	background-size: 5rem 36.6rem
}

.c_vs_p_r_6 {
	background: url(../images/p_r.png) no-repeat;
	background-position: 0 -30.5rem;
	background-size: 5rem 36.6rem
}

.foot_bar {
	position: absolute;
	z-index: 50;
	border-top: .1rem solid #2b4872;
	bottom: 0;
	width: 100%;
	height: 2.14rem;
	background: url(../images/f_bar.jpg) repeat-x;
	background-size: 2.5rem auto
}

.click_btn_wrap {
	position: absolute;
	z-index: 10;
	right: .4rem;
	bottom: .05rem;
	width: 2.7rem;
	height: 2.4rem;
}

.click_btn_wrap aside {
	width: 2.7rem;
	height: 2.4rem;
	display: inline-block
}

.click_btn_on {
	background: url(../images/clickbtn.png) no-repeat;
	background-size: 2.7rem 9.6rem
}

.click_btn_on.on {
	background: url(../images/clickbtn.png) no-repeat;
	background-size: 2.7rem 9.6rem;
	background-position: 0 -2.4rem
}

.cry_btn_on {
	background: url(../images/clickbtn.png) no-repeat;
	background-size: 2.7rem 9.6rem;
	background-position: 0 -4.8rem
}

.cry_btn_on.on {
	background: url(../images/clickbtn.png) no-repeat;
	background-size: 2.7rem 9.6rem;
	background-position: 0 -7.2rem
}

.kong_btn_on {}

.result_wrap {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .4);
	z-index: 60
}

.result_card {
	position: absolute;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: .2rem;
	top: 50%;
	left: 50%;
	z-index: 1;
	-webkit-transform: translate(-50%, -60%);
	transform: translate(-50%, -60%);
	background: #6ba0ef;
	border: .08rem solid #fff;
	border-radius: .2rem;
	width: 5.1rem;
	text-align: center;
	-webkit-box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .3);
	box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .3)
}

.result_info_pic {
	border-radius: 50%;
	border: .05rem solid #fff;
	width: 1.56rem;
	height: 1.56rem
}

.result_info {
	clear: both;
	text-align: center;
	font-size: .54rem;
	line-height: 1.6;
	color: #fff
}

.result_more {
	clear: both;
	padding: .3rem 0;
	font-size: .32rem;
	color: #2e5898
}

.wxShare {
	position: absolute;
	z-index: 61;
	width: 100%;
	height: 100%;
	background: url(../images/wxShare.png) no-repeat rgba(0, 0, 0, .6);
	background-position: 95% 3%;
	background-size: 50%;
}

.result_more a {
	color: #fcf915;
}

.result_op_wrap {
	clear: both;
	margin: 0 auto;
	text-align: center;
}

.result_op_wrap aside {
	margin-bottom: .2rem;
	clear: both
}

.result_op_wrap aside img {
	width: 4.43rem;
	height: .88rem
}


/* 排行榜 */

.backBtn {
	position: absolute;
	left: 0.59rem;
	top: 0.48rem;
	width: 0.4rem;
	height: 0.6rem;
	background: url(../images/backBtn.png);
	background-size: 100% 100%;
	z-index: 99;
}

.li_card {
	position: relative;
	width: 6.3rem;
	height: 1rem;
	background: url(../images/playerInfosBox.png) center no-repeat;
	background-size: 100% 100%;
}

.li_card_le {
	margin: 0 auto;
	width: 3.5rem;
	height: 1rem;
}

.li_card_le span {
	display: inline-block;
	width: 1.5rem;
	height: 1rem;
}

.li_ran {
	float: left;
}

.li_num {
	float: right;
}

.li_card_le p {
	height: 0.3rem;
	font-size: 0.27rem;
	color: #5b5b00;
}

.li_card_le strong {
	font-size: 0.4rem;
	color: white;
	/*color: transparent;*/
	font-weight: bold;
	-webkit-text-stroke: 0.02rem #5b5b00;
}

.li_win_se {
	width: 6.3rem;
	height: 6rem;
	position: relative;
}

.li_win_as {
	position: absolute;
	top: 0.3rem;
	width: 6.3rem;
	height: 7.3rem;
	background: url(../images/whiteBg.png);
	background-size: 100% 100%;
}


/*文静end*/

.scrollBox {
	width: 100%;
	height: 100%;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAF9), to(#F2F2F1));
	background-image: linear-gradient(-180deg, #FAFAF9 0%, #F2F2F1 100%);
	border-radius: 10px;
	background: url(../images/whiteBg.png) no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}

.scrollBox .scrollInner {
	margin-top: 0.1rem;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

.scrollBox .item {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.scrollBox .item .bottomLine {
	position: absolute;
	width: 5.92rem;
	right: 0;
	bottom: 0;
	height: .02rem;
	background: url(../images/bottomLine.png);
	background-size: 100% 100%;
}

.scrollBox .item .topMain {
	margin: .1rem 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	width: 100%;
	height: 0.9rem;
}

.scrollBox .item .topMain .rank {
	width: .63rem;
	height: .79rem;
	line-height: .79rem;
	text-align: center;
	font-family: PingFangHK-Regular;
	font-size: .35rem;
	color: #999999;
}

.scrollBox .item .topMain .first {
	width: .63rem;
	height: .79rem;
	background: url(../images/first.png);
	background-size: 100% 100%;
}

.scrollBox .item .topMain .second {
	width: .63rem;
	height: .79rem;
	background: url(../images/second.png);
	background-size: 100% 100%;
}

.scrollBox .item .topMain .third {
	width: .63rem;
	height: .79rem;
	background: url(../images/third.png);
	background-size: 100% 100%;
}

.scrollBox .item .topMain .playersImg {
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
}

.scrollBox .item .topMain .playersName {
	width: 2.94rem;
	height: 0.42rem;
	font-family: PingFangHK-Regular;
	font-size: .3rem;
	color: #333333;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.scrollBox .item .topMain .score {
	width: 1rem;
	font-family: PingFangHK-Semibold;
	font-size: .45rem;
}

.red {
	color: #FF1B14;
}

.scrollBox .item .topMain .score {
	text-align: right;
	font-family: PingFangHK-Regular;
	font-size: .25rem;
}

.scrollBox .item .topMain .score span {
	font-weight: bold;
	font-size: .28rem;
}